<!--
 * @Author: 许恒 2412939198@qq.com
 * @Date: 2022-08-16 17:13:41
 * @LastEditors: 许恒 2412939198@qq.com
 * @LastEditTime: 2022-08-16 17:26:20
 * @FilePath: \UNIAPP\components\getCode\getCode.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="getCode">
    <!-- 获取验证码组件 -->
    <view v-if="time > 0">{{ time }}s 后重试</view>
    <view v-else @click="getCode">获取验证码</view>
  </div>
</template>
<script>
export default {
  props: {
    //手机号
    send_to: {
      type: [Number, String],
      required: true,
    },
    // 类型
    send_type: {
      type: [String],
      required: true,
    },
  },
  data() {
    return {
      time: 0, //倒计时
    };
  },
  mounted() { },
  methods: {
    //获取验证码
    getCode() {
      if (!this.$tools.verifyMobeil(this.send_to)) return;
      this.$request.sendCode(
        {
          mobile: this.send_to,
          sence: this.send_type,
        },
        (res) => {
          if (res.code == 1) {
            this.time = 60; //显示倒计时
            var auth_timetimer = setInterval(() => {
              this.time--;
              if (this.time <= 0) {
                clearInterval(auth_timetimer);
                this.time = 0;
              }
            }, 1000);
            this.$toast("发送成功");
          } else {
            this.$toast(res.msg);

          }
        }
      );
    },
  },
};
</script>
<style scoped lang="scss">
.getCode {
  view {
    width: 160rpx;
    line-height: 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: #5F74F4;
  }
}
</style>
